<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>未来30分钟环境预测</title>
    <script src="../static/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 40px;
            background-color: #f4f6f8;
        }

        h1 {
            text-align: center;
            color: #2c3e50;
        }

        .chart-container {
            display: flex;
            flex-direction: column;
            gap: 40px;
            margin-top: 30px;
        }

        .chart {
            width: 100%;
            height: 400px;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div id="navbar"></div>

    <script>
    fetch('/static/nav.html')  // 确保 nav.html 放在 static/ 目录下
        .then(response => response.text())
        .then(data => {
            document.getElementById('navbar').innerHTML = data;
        })
        .catch(err => console.error('无法加载导航栏:', err));
    </script>

    <h1>未来30分钟温湿度与光照预测</h1>

    <div class="chart-container">
        <div id="tempChart" class="chart"></div>
        <div id="humChart" class="chart"></div>
        <div id="lightChart" class="chart"></div>
    </div>

    <script>
        fetch('/predict_data')
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert("预测出错：" + data.error);
                    return;
                }

                const timestamps = data.timestamps;
                const temps = data.temperature;
                const hums = data.humidity;
                const lights = data.light_intensity;

                // 绘制温度图表
                drawChart('tempChart', '温度预测 (°C)', timestamps, temps, '#ff7300');
                drawChart('humChart', '湿度预测 (%)', timestamps, hums, '#339af0');
                drawChart('lightChart', '光照强度预测 (lux)', timestamps, lights, '#2fb344');
            })
            .catch(error => {
                console.error('获取预测数据失败:', error);
                alert('获取预测数据失败，请刷新重试。');
            });

        function drawChart(id, title, xAxisData, seriesData, color) {
            const chart = echarts.init(document.getElementById(id));
            chart.setOption({
                title: {
                    text: title
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: xAxisData,
                    axisLabel: { rotate: 45 }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: title,
                    type: 'line',
                    data: seriesData,
                    smooth: true,
                    itemStyle: { color: color },
                    showSymbol: false
                }]
            });
        }
    </script>

</body>
</html>